<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref('1')
const radio1 = ref('1')
</script>

<template>
  <div
    class="w-full h-12vw bg-blue-500 text-white text-4.8vw fixed left-0 top-0 z-1000 flex justify-center items-center">
    在线支付
  </div>
  <div class="p-4 text-gray-500 text-xl">
    未支付订单信息：
  </div>
  <div class="demo-collapse">
    <el-collapse v-model="activeName" accordion="true">
      <el-collapse-item title="万家饺子馆" name="1">
        <div class="flex flex-col gap-2">
          <div class="flex flex-row justify-between">
            <div>纯肉鲜肉（水饺）*2</div>
            <div>￥15</div>
          </div>
          <div class="flex flex-row justify-between">
            <div>玉米鲜肉（水饺）*1</div>
            <div>￥16</div>
          </div>
          <div class="flex flex-row justify-between">
            <div>配送费</div>
            <div>￥3</div>
          </div>
        </div>
      </el-collapse-item>
      <el-divider />
      <div>
        <el-radio-group v-model="radio1">
          <div class="flex flex-row justify-between items-center mb-2">
            <img src="D:\project_all\elm\src\assets\pic\wechat.png">
            <el-radio value="1" size="large" border>微信支付</el-radio>
          </div>
          <div class="flex flex-row justify-between items-center">
            <img src="D:\project_all\elm\src\assets\pic\alipay.png">
            <el-radio value="2" size="large" border>支付宝支付</el-radio>
          </div>
        </el-radio-group>
      </div>
    </el-collapse>
  </div>
</template>
